<!DOCTYPE html>
<html>
<head>
  <title>A11y Test Bed - Click Targets</title>
  <style>
    .styled-test-button {
      appearance: auto;
      background-color: buttonface;
      border-color: buttonborder;
      border-radius: 3px;
      border-style: outset;
      border-width: 1px;
      box-sizing: border-box;
      display: inline-block;
      cursor: default;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      margin: 0em;
      padding: 2px 6px;
      text-align: center;
      line-height: normal;
      user-select: none;
    }

    .styled-test-button:hover {
      background-color: #ddd; 
    }

    .styled-test-button:active {
      background-color: #f7f7f7;
    }

    .styled-test-link {
      color: blue;
      cursor: pointer;
      display: inline-block;
      text-decoration: underline;
    }

    .styled-test-link:active {
      color: #ff5100;
    }
  </style>
</head>
<body>
  <div>
    <p>
      Last Action: <span id="test-a11y-click-result">Blank</span>
    </p>
    <!-- Semantic Button -->
    <button
      type="button"
      id="test-a11y-semantic-button"
    >
      Semantic
    </button>
    <!-- Styled Button -->
    <div
      id="test-a11y-styled-button"
      class="styled-test-button"
    >
      Styled
    </div>
    <!-- Role Button -->
    <div
      type="button"
      role="button"
      tabIndex="0"
      id="test-a11y-role-button"
      class="styled-test-button"
    >
      Role
    </div>

    <hr />

    <!-- Semantic Link -->
    <a
      href="#"
      id="test-a11y-semantic-link"
    >
      Semantic
    </a>
    <!-- Styled Link -->
    <div
      class="styled-test-link"
      id="test-a11y-styled-link"
    >
      Styled
    </div>
    <!-- Role Link -->
    <div
      role="link"
      tabIndex="0"
      class="styled-test-link"
      id="test-a11y-role-link"
    >
      Role
    </div>
  </div>

  <script>
    function updateActionMessage(message) {
      document.getElementById('test-a11y-click-result').innerText = message
    }

    // Button Listeners
    document.getElementById('test-a11y-semantic-button').addEventListener('click', function () {
      updateActionMessage('Click - SEMANTIC Button')
    })

    document.getElementById('test-a11y-styled-button').addEventListener('click', function () {
      updateActionMessage('Click - STYLED Button')
    })

    document.getElementById('test-a11y-role-button').addEventListener('click', function () {
      updateActionMessage('Click - ROLE Button')
    })

    document.getElementById('test-a11y-role-button').addEventListener('keydown', function (event) {
      if (event.key === "Enter" || event.key === ' ') {
        updateActionMessage(`Keydown - ${event.key === 'Enter' ? event.key : 'Space' } - ROLE Button`)
      }
    })
   
    // Link Listeners
    document.getElementById('test-a11y-semantic-link').addEventListener('click', function () {
      updateActionMessage('Click - SEMANTIC Link')
    })

    document.getElementById('test-a11y-styled-link').addEventListener('click', function () {
      updateActionMessage('Click - STYLED Link')
    })

    document.getElementById('test-a11y-role-link').addEventListener('click', function () {
      updateActionMessage('Click - ROLE Link')
    })

    document.getElementById('test-a11y-role-link').addEventListener('keydown', function (event) {
      if (event.key === "Enter") {
        updateActionMessage(`Keydown - Enter - ROLE Link`)
      }
    })                          
  </script>
</body>
</html>
